@use '../../../scss/gio-layout' as gio-layout;

@use 'sass:map';
@use '@angular/material' as mat;
@use '@gravitee/ui-particles-angular' as gio;

$background: map-get(gio.$mat-theme, background);
$primary: map.get(gio.$mat-theme, primary);
$accent: map.get(gio.$mat-theme, accent);

:host {
  @include gio-layout.gio-responsive-margin-container;
}

.org-settings-roles {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;

  &__content {
    // Hack to match place not used by the Table of Content
    // Classic flex setup aren't working because of list's mat-line
    width: 81%;

    &__card {
      margin-bottom: 32px;
    }

    &__headline {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;
    }

    &__list {
      &__item {
        &:hover {
          background-color: mat.get-color-from-palette($background, hover);
        }

        &__clickable {
          cursor: pointer;
        }

        &__actions {
          --mdc-list-list-item-trailing-supporting-text-color: none;
        }
      }
    }
  }
}
